<template>
	<view>
		<!-- 1 -->
		<view class="smart-page-head"></view>
		<view>
			<video class="checkbox-item" style="width: 100%; height: 400rpx; " src="https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/%E7%AC%AC1%E8%AE%B2%EF%BC%88uni-app%E4%BA%A7%E5%93%81%E4%BB%8B%E7%BB%8D%EF%BC%89-%20DCloud%E5%AE%98%E6%96%B9%E8%A7%86%E9%A2%91%E6%95%99%E7%A8%8B@20200317.mp4" controls></video>
		</view>
		<view class="spsy"></view>
		<!-- 2 -->
		<view class="sp">
			<view class="b">男子黄某误闯女生宿舍监控实拍...</view>
			<view class="z">
				<view class="z-z">1.0万次播放</view>
				<view class="z-z">
					<image src="../../../static/dz.png" style="width: 30rpx; height: 30rpx; " mode=""></image>100
				</view>
			</view>
			<!-- 3 -->
			<view class="z">
				<view>
					<image src="../../../static/2017090511563086816.jpg" style="width: 80rpx;height: 80rpx;" ></image>
				</view>
				<view class="z-h">
					<view>科干独家</view>
					<view class="z-z">12-12</view>
				</view>
				<view class="reg-right">+关注</view>
			</view>
		</view>
		<!-- 4 -->
		<view class="item">
			<view class="fw">为你推荐</view>
			<!-- 4.1 -->
			<view class="e-item">
				<view class="e">
					<image src="../../../static/m.png" style="height: 200rpx; width: 200rpx;"  mode=""></image>
				</view>
				<view>
					<view class="e-right">惊！大兴安岭出现大型野兽,体重1吨比轿车还大</view>
					<view class="z">
						<view class="z-z1">大家大观察</view>
						<view class="z-z2">5.3万次播放</view>
					</view>
				</view>
			</view>
			<!-- 4.2 -->
			<view class="e-item">
				<view class="e">
					<image src="../../../static/m.png" style="height: 200rpx; width: 200rpx;"  mode=""></image>
				</view>
				<view>
					<view class="e-right">惊！大兴安岭出现大型野兽,体重1吨比轿车还大</view>
					<view class="z">
						<view class="z-z1">大家大观察</view>
						<view class="z-z2">5.3万次播放</view>
					</view>
				</view>
			</view>
			<!-- 4.3 -->
			<view class="e-item">
				<view class="e">
					<image src="../../../static/m.png" style="height: 200rpx; width: 200rpx;"  mode=""></image>
				</view>
				<view>
					<view class="e-right">惊！大兴安岭出现大型野兽,体重1吨比轿车还大</view>
					<view class="z">
						<view class="z-z1">大家大观察</view>
						<view class="z-z2">5.3万次播放</view>
					</view>
				</view>
			</view>
			<!-- 4.4 -->
			<view class="e-item">
				<view class="e">
					<image src="../../../static/m.png" style="height: 200rpx; width: 200rpx;"  mode=""></image>
				</view>
				<view>
					<view class="e-right">惊！大兴安岭出现大型野兽,体重1吨比轿车还大</view>
					<view class="z">
						<view class="z-z1">大家大观察</view>
						<view class="z-z2">5.3万次播放</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 5 -->
		<view style="color: #c5c5c5; margin-bottom: 30rpx; margin-left: 20rpx;">热门评论</view>
		<!-- 5.1 -->
		<view class="p1">
			<view>
				<image src="../../../static/mmao.png" style="height: 80rpx; width: 80rpx; margin-left: 20rpx;" mode=""></image>
			</view>
			<view class="1p">
				<view class="p11">
					<view>
						<view class="ztl">黄某</view>
						<view class="sj">
							<view class="sjs">1小时前</view>
							<view class="sjs">广西桂林</view>
						</view>
					</view>
					<view class="p1">
						<view class="p111">3</view>
						<view class="p111">
							<image src="../../../static/dz.png" style="width: 30rpx; height: 30rpx; " mode=""></image>
						</view>
						<view class="p111">
							<image src="../../../static/xingxi.png" style="width: 30rpx; height: 30rpx; " mode=""></image>
						</view>
					</view>
				</view>
				<view class="p11">我是故意进去的，不是误闯</view>
			</view>
		</view>
		<!-- 5.2 -->
		<view class="p1">
			<view>
				<image src="../../../static/mmao.png" style="height: 80rpx; width: 80rpx; margin-left: 20rpx;" mode=""></image>
			</view>
			<view class="1p">
				<view class="p11">
					<view>
						<view class="ztl">黄某</view>
						<view class="sj">
							<view class="sjs">1小时前</view>
							<view class="sjs">广西桂林</view>
						</view>
					</view>
					<view class="p1">
						<view class="p111">3</view>
						<view class="p111">
							<image src="../../../static/dz.png" style="width: 30rpx; height: 30rpx; " mode=""></image>
						</view>
						<view class="p111">
							<image src="../../../static/xingxi.png" style="width: 30rpx; height: 30rpx; " mode=""></image>
						</view>
					</view>
				</view>
				<view class="p11">我是故意进去的，不是误闯</view>
			</view>
		</view>
		<!-- 5.3 -->
		<view class="p1">
			<view>
				<image src="../../../static/mmao.png" style="height: 80rpx; width: 80rpx; margin-left: 20rpx;" mode=""></image>
			</view>
			<view class="1p">
				<view class="p11">
					<view>
						<view class="ztl">黄某</view>
						<view class="sj">
							<view class="sjs">1小时前</view>
							<view class="sjs">广西桂林</view>
						</view>
					</view>
					<view class="p1">
						<view class="p111">3</view>
						<view class="p111">
							<image src="../../../static/dz.png" style="width: 30rpx; height: 30rpx; " mode=""></image>
						</view>
						<view class="p111">
							<image src="../../../static/xingxi.png" style="width: 30rpx; height: 30rpx; " mode=""></image>
						</view>
					</view>
				</view>
				<view class="p11">我是故意进去的，不是误闯</view>
			</view>
		</view>
		<!-- 5.4 -->
		<view class="p1">
			<view>
				<image src="../../../static/mmao.png" style="height: 80rpx; width: 80rpx; margin-left: 20rpx;" mode=""></image>
			</view>
			<view class="1p">
				<view class="p11">
					<view>
						<view class="ztl">黄某</view>
						<view class="sj">
							<view class="sjs">1小时前</view>
							<view class="sjs">广西桂林</view>
						</view>
					</view>
					<view class="p1">
						<view class="p111">3</view>
						<view class="p111">
							<image src="../../../static/dz.png" style="width: 30rpx; height: 30rpx; " mode=""></image>
						</view>
						<view class="p111">
							<image src="../../../static/xingxi.png" style="width: 30rpx; height: 30rpx; " mode=""></image>
						</view>
					</view>
				</view>
				<view class="p11">我是故意进去的，不是误闯</view>
			</view>
		</view>
		
		<view class="xhx"></view>
		<view class="jz">已加载全部</view>
		<view class="xhxx"></view>
		
		<!-- 6 -->
		<view class="zdb">
			<view>
				<image src="../../../static/zjt.png" style="width: 40rpx; height: 40rpx;" mode=""></image>
			</view>
			<view class="left">
				<input type="text" value="" style="width: 220rpx; margin-right: 30rpx; font-size: 25rpx;" placeholder='我来说两句' class="search_input" />
			</view>
			<view class="j1">
				<image src="../../../static/xingxi.png" style="width: 30rpx;height: 30rpx;" mode=""></image>
			</view>
			<view class="j1">
				<image src="../../../static/wjx.png" style="width: 40rpx;height: 40rpx;" mode=""></image>
			</view>
			<view class="j1">
				<image src="../../../static/lj.png" style="width: 40rpx;height: 40rpx;" mode=""></image>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style>
	
	.fw{
		font-weight: 600;
	}
	.item{
		margin: 20rpx 20rpx 20rpx 20rpx;
	}
	
	.spsyP{
		width: 100%;
		height: 400rpx;
	}
	
	
	
	.sp{
		margin: 20rpx;
		border-bottom: 1rpx solid #999999;
	}
	
	.b{
		margin-top: 30rpx;
		margin-bottom: 30rpx;
		font-size: 45rpx;
		font-weight: 600;
	}
	
	.reg-right{
		background:#DD524D;
		height: 50rpx;
		border-radius: 50rpx;
		color: #FFFFFF;
		width: 140rpx;
		text-align: center;
	}
	.c{
		display: flex;
		flex-direction: row;	
	}
	.d{
		display: flex;
		flex-direction: row;
		border-bottom: 1rpx solid #D0D0D0;
	}
	.z{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		margin-bottom: 30rpx;
	}
	.z-h{
		margin-right: 300rpx;
	}
	.z-z1{
		font-size: 30rpx;
		color: #C8C7CC;
		margin: 20rpx;
	}
	.z-z2{
		font-size: 30rpx;
		color: #C8C7CC;
		margin: 20rpx;
	}
	.z-z{
		font-size: 30rpx;
		color: #C8C7CC;
	}
	.e-item{
		display: flex;
		flex-direction: row;
	}
	.e-right{
		margin: 20rpx;
		margin-top: 40rpx;
		font-size: 35rpx;
		font-weight: 600;
		
	}
	.e{
		margin-top: 30rpx;
	}
	.p1{
		display: flex;
		flex-direction: row;
		margin-right: -280rpx;
		margin-bottom: 40rpx;
	}
	.lp{
		margin-left: -30rpx;
	}
	.pll{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		-wekbet-justify-content:space-between;
		margin-left: 60rpx;
	}
	.plll{
		margin-right: 50rpx;
	}
	.xhx{
		border-bottom: 1rpx solid #C0C0C0;
		margin: 0 20rpx 20rpx 100rpx;
	}
	.xhxx{
		border-bottom: 1rpx solid #D5d5d5;
		margin: 0 20rpx 20rpx 10rpx;
		margin-bottom: 40rpx;
	}
	.jz{
		color: #C0C0C0;
		margin-left: 120rpx;
		margin-bottom: 80rpx;
	}
	.zdb{
		display: flex;
		flex-direction: row;
		background-color: #FFFFFF;
		width: 100%;
		height: 60rpx;
		position: fixed;
		bottom: 0rpx;
		justify-content: space-around;
	}
	.left{
		height: 15rpx;
		margin-left: 0rpx;
	}
	.search_input{
		background-color: #F8F8F8;
		border-radius: 40rpx;
		padding: 5rpx 30rpx 6rpx 30rpx;
		margin-right: 1rpx;
	}
	.jl{
		margin-left: 80rpx;
	}
	.ztl{
		font-size: 30rpx;
		color: #007aff;
		margin-top: 10rpx;
	}
	.zdb{
		display: flex;
		flex-direction: row;
		height: 80rpx;
		
	}
	.left{
		height: 10rpx;
		margin-left: 20rpx;
	}
	.search_input{
		background-color: #F8F8F8;
		border-radius: 40rpx;
		padding: 5rpx 30rpx 6rpx 30rpx;
		margin-right: 1rpx;
	}
	.jl{
		margin-left: 40rpx;
		
	}
</style>
